<template>
	<view class="comp-header-bar" :style="{ height: `${height}px` }">
		<u-navbar :bgColor="bgColor" autoBack></u-navbar>
	</view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

defineOptions({ name: "HeaderBar" });

interface Props {
	bgColor?: string;
}

withDefaults(defineProps<Props>(), {
	bgColor: "white",
})

const instance = getCurrentInstance();

const query = uni.createSelectorQuery().in(instance?.proxy);

const height = ref<number>(100);

onReady(() => {
	query
		.select(".comp-header-bar .u-fixed")
		.boundingClientRect((data: Record<string, any>) => {
			if (data) {
				height.value = data?.height;
			}
		})
		.exec();
});

</script>
